<template>
  <panel :title="title">
    <p>
      管理员ID: <span class="data-box">{{ personalData.id }}</span>
    </p>
    <el-divider></el-divider>
    <p>
      账号: <span class="data-box">{{ personalData.account }}</span>
    </p>
    <el-divider></el-divider>
    <p>
      用户组: <span class="data-box">{{ personalData.ctime }}</span>
    </p>
    <el-divider></el-divider>
    <p>
      创建时间: <span class="data-box">{{ personalData.userGroup }}</span>
    </p>
    <el-divider></el-divider>
    <div class="avatar-box">
      <span>管理员头像:</span>
      <div class="upload-box">
      <el-upload
        class="avatar-uploader"
        action="http://127.0.0.1:5000/users/avatar_upload"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload"
      >
        <img
          v-if="personalData.imgUrl"
          :src="API + personalData.imgUrl"
          class="avatar"
        />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-button type="warning" size="mini" @click="uploadEditAvatar">修改头像</el-button>
      </div>
    </div>
    <el-divider></el-divider>
  </panel>
</template>

<script>
import Panel from "@/components/panel/Panel.vue";
import { personalData, editAvatar } from "@/api/user";
import { normalizeFullDate } from "@/utils/tools";

export default {
  components: {
    Panel,
  },
  data() {
    return {
      title: "管理员信息",
      API: "http://127.0.0.1:5000",
      personalData: {
        id: "",
        account: "",
        ctime: "",
        userGroup: "",
        imgUrl: "",
      },
    };
  },
  methods: {
    async getPersonalData() {
      try {
        let personalRes = await personalData();
        let { id, account, ctime, userGroup, imgUrl } = personalRes.data;
        this.personalData.id = id;
        this.personalData.account = account;
        this.personalData.ctime = normalizeFullDate(ctime);
        this.personalData.userGroup = userGroup;
        this.personalData.imgUrl = imgUrl;
      } catch (err) {
        console.log(err);
      }
    },
    // 上传头像成功后
    handleAvatarSuccess(res) {
      let { code, imgUrl, msg } = res;
      this.personalData.imgUrl = imgUrl;

      // 告诉顶部组件和左边菜单栏组件  要重新渲染一下数据
     
      this.$message({
        type: "success",
        message: msg,
      });
    },
    // 在头像上传之前
    beforeAvatarUpload(file) {
      // 规定头像只能是jpg
      const isJPG = file.type === "image/jpeg"
      const isLt500KB = file.size / 1024 < 500;
     if (!isJPG) {
       this.$message.error('头像只能是jpg格式')
     }

      // 在上传头像之前可以规定头像的大小
     if (!isLt500KB) {
       this.$message.error('图片大小不能大于500KB')
     }

      return isJPG && isLt500KB;

    },
    async uploadEditAvatar() {
      try{
        let res = await editAvatar(this.personalData.imgUrl.substr(21))
         if (res.data.code === 0) {
        this.$bus.$emit('renderAvatar', '头像改变')
      }
      }catch(err) {
        console.log(err)
      }
    }
  },
  created() {
    this.getPersonalData();
  },
};
</script>

<style lang="less" scoped>
.avatar-box {
  display: flex;
  align-items: center;
}
.upload-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 20px;
}

.avatar-uploader {
  /deep/.el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  /deep/.el-upload:hover {
    border-color: #409eff;
  }
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.data-box {
  margin-left: 10px;
}


</style>